function newText(name) {
    return new Konva.Text({
        x: 5,                 //矩形的宽度
        y: 5,                //矩形高度
        text: name, fontSize: 20, fontFamily: 'Arial', fill: '#d41010'
    });
}

function newCircle() {
    return new Konva.Circle({
        radius: 25, // 半径
        fill: 'red' // 填充颜色
    });
}

function newRect() {
    return new Konva.Rect({     //创建一个矩形
        width: 120,                 //矩形的宽度
        height: 30,                //矩形高度
        fill: 'gold',               //矩形填充的颜色
        stroke: 'navy',             //矩形描边的颜色
        strokeWidth: 2,             //填充宽度
        opactity: .2,               //矩形的透明度
        cornerRadius: 10,           //圆角的大小（像素）
        id: 'rect1',                //id属性，类似dom的id属性
        name: 'rect', //
        // draggable: true             //是否可以进行拖拽
    });
}

function newGroup(x, y, name) {
    return new Konva.Group({x: x, y: y, draggable: false, name: name});
}


function ceshi() {
    const rect = new Konva.Rect({     //创建一个矩形
        x: 150, y: 100, width: 120,                 //矩形的宽度
        height: 30,                //矩形高度
        fill: 'gold',               //矩形填充的颜色
        stroke: 'navy',             //矩形描边的颜色
        strokeWidth: 2,             //填充宽度
        opactity: .2,               //矩形的透明度
        cornerRadius: 10,           //圆角的大小（像素）
        id: 'rect1',                //id属性，类似dom的id属性
        name: 'rect', //
        draggable: true             //是否可以进行拖拽
    });
    layer3.add(rect);
}

function suofang(num) {
    num ? layer2Scale = layer2Scale - 0.1 : layer2Scale = layer2Scale + 0.1

    layer2.scale({x: layer2Scale, y: layer2Scale});
    layer3.scale({x: layer2Scale, y: layer2Scale});
}


// function resizeKonvaApp() {
//     stage.width(window.innerWidth);
//     stage.height(window.innerHeight);
//     stage.draw();
// }
//
// window.addEventListener('resize', resizeKonvaApp);

//
//
// var rect1 = new Konva.Rect({
//     x: 20,
//     y: 20,
//     width: 100,
//     height: 50,
//     fill: 'green',
//     stroke: 'black',
//     strokeWidth: 4,
// });
// rect1.on('click', function (e) {
//     const shapeLayer = e.target.getLayer();
//     shapeLayer.moveUp();
//     console.log(shapeLayer.name());
// });
// layer1.add(rect1);
//
// var rect2 = new Konva.Rect({
//     x: 30,
//     y: 30,
//     width: 100,
//     height: 50,
//     fill: 'red',
//     shadowBlur: 10,
//     cornerRadius: 10,
// });
// layer2.add(rect2);
//
// var rect3 = new Konva.Rect({
//     x: 40,
//     y: 40,
//     width: 100,
//     height: 100,
//     fill: 'blue',
//     cornerRadius: [0, 10, 20, 30],
// });
// layer3.add(rect3);
// // add the layer to the stage
